<template>
  <div class="">
    <Alert show-icon>
      只支持平台导出的ZIP页面压缩包，且文件大小不能超过50MB
    </Alert>
    <Upload class=""
            type="drag"
            :action="uploadAction"
            :headers="{Authorization: token}"
            :data="{projectId: projectId}"
            accept=".zip"
            :format="['zip']"
            :max-size="maxSize"
            name="files"
            :show-upload-list="false"
            :on-success="imageUploadSuccessHandle"
            :on-format-error="imageUploadFormatError"
            :on-exceeded-size="imageUploadExceededSize"
            :before-upload="imageUploadBeforeUpload"
            :on-error="imageUploadErrorHandle">
      <div style="padding: 50px 0">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>点击或拖拽文件到这里上传</p>
      </div>
      <Spin fix v-if="uploadLoading">
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        <div>正在导入中，请不要关闭当前窗口...</div>
      </Spin>
    </Upload>
  </div>
</template>

<script>
  export default {
    name: 'ImportPage',
    props: {
      // projectId: {
      //   type: String,
      //   require: true
      // }
    },
    data() {
      return {
        projectId: '',
        uploadAction: window.g.AXIOS_BASE_URL + '/page/importPage',
        maxSize: 51200,
        uploadLoading: false,
        token: localStorage.getItem("token")
      }
    },
    mounted() {

    },
    methods: {

      initProjectId (projectId) {
        this.projectId = projectId
      },

      /**
       * 文件上传成功
       * @param res
       */
      imageUploadSuccessHandle (res) {
        this.uploadLoading = false;
        if(res.success) {
          this.$Message.success("导入成功");
          this.$emit('upload-success');
        }else {
          this.$Message.error({
            duration: 5,
            content: res.message
          })
        }
      },

      /**
       * 上传文件格式错误
       */
      imageUploadFormatError () {
        this.uploadLoading = false;
        this.$Message.warning({
          duration: 5,
          content: '上传文件格式错误，只支持（.zip）格式的模板压缩包文件'
        })
      },

      /**
       * 上传文件大小超出限制
       */
      imageUploadExceededSize () {
        this.uploadLoading = false;
        this.$Message.warning({
          duration: 5,
          content: '上传文件大小超出限制，上传文件不能超过50MB'
        })
      },

      /**
       * 上传文件之前
       */
      imageUploadBeforeUpload () {
        this.uploadLoading = true
      },

      /**
       * 文件上传失败时
       * @param event
       * @param file
       * @param fileList
       */
      imageUploadErrorHandle (error, file, fileList) {
        this.uploadLoading = false;
        this.$Message.error({
          duration: 5,
          content: '页面导入失败'
        })
      },
    },
    computed: {}
  }
</script>

<style lang="less" scoped>
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
</style>
